<template>
    <PopUps :bgIndex="1000" widthMy='60%'  height-my="78%" :boxIndex="1001" >
        <div class="define-box">
            <i class="iconfont icon-icon-cross-empty" @click="closePop"></i>
            <div class="header">
                <h2>通知|河南金圣龙代表队参加2023南阳市市民健身首届乒乓球双打业余联赛</h2>
                <p class="header-content"><span class="content-left">河南金圣龙文化传播股份有限公司</span> <span class="content-right">
                        &nbsp; 2024年04月10日 &nbsp;18:55 &nbsp;河南</span></p>
            </div>
            <div class="main">
                <img src="../image/4.jpg" alt="" class="main-img">
                <div class="content">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        4月8日，由南阳市卫生健康体育委员会主办，南阳市少年儿童业余体校、南阳市博奥青少年体育俱乐部承办，南阳市社会体育指导员协会协办的“2023南阳市市民健身首届乒乓球双打业余联赛”在南阳市少年儿童业余体校乒乓球馆举行。河南金圣龙文化传播股份有限公司选派3名选手组成代表队参加角逐。
                        <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        比赛现场气氛热烈，我公司选手精神饱满、斗志昂扬、奋勇争先，灵活的动作、精彩的扣杀不时引来现场观众的阵阵喝彩。
                        <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        本次活动为乒乓球爱好者搭建了沟通的桥梁，我公司代表队展现了积极进取、努力拼搏的精神风貌，赛出了风格、赛出了水平，提升了自身的球技、锻炼了身体，也促进了与各单位间的互动和交流。
                    </p>

                </div>
            </div>
            <div class="floor">
                <img src="../image/3.jfif" alt="" @click="closePop">
            </div>
        </div>
    </PopUps>
</template>

<script setup>
import PopUps from '@/components/My/PopUps';
import { defineEmits } from 'vue';
let emit = defineEmits(['closePop'])
const closePop = () => {
    emit('closePop')
}
</script>

<style scoped lang="scss">
@mixin column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.define-box {
    padding: 20px;
    box-sizing: border-box;
    @include column;
    position: relative;
    .iconfont{
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 22px;
    }
    .header {
        
        .header-content {
            margin: 10px 0 20px 0;

            .content-left {
                color: #576B95;
            }

            .content-right {
                color: #ccc;
            }
        }
    }

    .main {
        @include column;

        .main-img {
            width: 600px;
        }

        .content {
            @include column;

            p {
                width: 600px;
                margin: 20px 0;
            }

            img {
                width: 600px;
            }
        }
    }

    .floor {
        img {
            width: 320px;
        }
    }
}</style>
